// 混入 mixin
@mixin center{
    display: flex;
    justify-content:center;
    text-align: center;
    align-items: center;
}
.boxCenter{
    @include center;
}
// @mixin传参可以用默认值
@mixin text($fontSize,$fontColor,$borderWidth:3px){
    font-size: $fontSize;
    color: $fontColor;
    border: $borderWidth solid #555;
}

.boxText1{
    text-align: center;
    // 匿名传参必须安装定义时传参的顺序传参
    @include text(15px, blue, 2px);
}
.boxText2{
    text-decoration: underline;
    // 赋值传参就可不按参数的顺序写
    @include text($borderWidth:5px,$fontColor:yellow,$fontSize:20px);
}



// 继承extend 不能传入参数只能生成并集
.btn{
    font-size: 15px;
    color: red;
    border: 1px solid red;
    text-align: center;
}

.boxBtn1{
    width: 100px;
    height: 100px;
    @extend .btn;
}

.button{
    background: yellowgreen;
    color: green;
    @extend .btn;
}
